import { FC, memo } from 'react'
import { Button } from 'antd'
// import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
// import Layout01, { A, B, C, D } from 'src/pages/test/layout01'
// import withLayout from 'src/lib/with-layout'
import { useCallbackState, useWatch } from '@/hooks'
// Import scss
import './App.scss'

// const withLayout01 = withLayout(Layout01, { key: 'layout01' })

// const AppDemo: FC = () => {
//     return (
//         <div>
//             <h1>APP</h1>
//             <Button type="primary">测试</Button>
//             <Router>
//                 <Switch>
//                     <Route path="/a" render={() => withLayout01(A)} />
//                     <Route path="/b" render={() => withLayout01(B)} />
//                     <Route path="/c" render={() => withLayout01(C)} />
//                     <Route path="/d" render={() => withLayout01(D)} />
//                 </Switch>
//             </Router>
//         </div>
//     )
// }

const AppDemo: FC = () => {
    const [count, setCount] = useCallbackState(0)

    // 原理是： 每次更新依赖 ==> count, 都会重新执行 useWatch
    useWatch(count, (old, newVal) => {
        console.log(old, newVal, 'watch update')
    })

    const onUpdate = () => {
        setCount(count + 1)
    }


    return (
        <div>
            <h1>APP == { count }</h1>
            <Button onClick={onUpdate}>更新</Button>
        </div>
    )
}



export default memo(AppDemo)
